<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElIcon } from 'element-plus'
import { YqLayout, YqHeader, YqSidebar, YqFooter, YqContent } from 'yqwin-plus'
import type { MenuItem } from 'yqwin-plus'

// 菜单数据
const menuItems = [
  { id: 'dashboard', label: '首页', icon: 'share', path: "/test/select.html", active: true },
  { id: 'workplace', label: '工作台', icon: 'share', path: "/test/select.html" },
  { id: 'documentation', label: '文档', icon: 'share', path: "/test/select.html" },
  { id: 'system', label: '系统管理', icon: 'share', children: [
    { id: 'system-user', label: '用户管理', icon: 'share', path: "/test/select.html" },
    { id: 'system-role', label: '角色管理', icon: 'share', path: "/test/select.html" },
    { id: 'system-menu', label: '菜单管理', icon: 'menu', path: "/test/select.html" }
  ]},
  { id: 'operation', label: '运维管理', icon: 'share', children: [
    { id: 'operation-log', label: '操作日志', icon: 'share', path: "/test/select.html" },
    { id: 'operation-monitor', label: '系统监控', icon: 'monitor', path: "/test/select.html" }
  ]}
]

// 顶部导航菜单
const navItems = ref([
  { id: 'analysis', label: '分析页', path: "/test/select.html", active: true },
  { id: 'workplace', label: '工作台', path: "/test/select.html" }
])

// 面包屑数据
const breadcrumb = ref([
  { name: '首页', path: '' },
  { name: '仪表盘', path: "/test/select.html"},
  { name: '分析页', path: "/test/select.html", active: true }
])

// 内容区域组件引用
const contentRef = ref()

// 处理菜单项点击
const handleMenuItemClick = (menuItem: MenuItem) => {
  // 更新菜单项的激活状态
  const updateActiveStatus = (items: MenuItem[]) => {
    items.forEach(item => {
      item.active = item.id === menuItem.id
      if (item.children) {
        updateActiveStatus(item.children)
      }
    })
  }
  updateActiveStatus(menuItems.value)
  
  // 调用内容区域的openTab方法打开新页签
  if (contentRef.value) {
    contentRef.value.openTab({
      id: menuItem.id,
      title: menuItem.label,
      path: menuItem.path,
      closable: menuItem.id !== 'dashboard' // 首页不可关闭
    })
  }
}

// 组件挂载后，默认打开首页
onMounted(() => {
  if (contentRef.value) {
    contentRef.value.openTab({
      id: 'dashboard',
      title: '首页',
      path: 'https://www.baidu.com',
      closable: false // 首页不可关闭
    })
  }
})
</script>

<template>
  <yq-layout>
    <!-- 侧边栏 -->
    <template #sidebar>
      <yq-sidebar :menu-items="menuItems" @menu-item-click="handleMenuItemClick"></yq-sidebar>
    </template>
    
    <!-- 顶部导航栏 -->
    <template #header>
      <yq-header 
        :nav-items="navItems"
        :breadcrumb="breadcrumb"
      ></yq-header>
    </template>
    
    <!-- 内容区域 -->
    <yq-content ref="contentRef"></yq-content>
    
    <!-- 页脚 -->
    <template #footer>
      <yq-footer></yq-footer>
    </template>
  </yq-layout>
</template>

<style scoped>
/* 仪表盘卡片样式 */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.dashboard-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.dashboard-card-icon.user {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.dashboard-card-icon.message {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.dashboard-card-icon.money {
  background-color: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.dashboard-card-icon.order {
  background-color: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.dashboard-card-content {
  flex: 1;
}

.dashboard-card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.dashboard-card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

/* 仪表盘图表样式 */
.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.dashboard-chart.full-width {
  grid-column: 1 / -1;
}

.dashboard-chart {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.dashboard-chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
}

.dashboard-chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.chart-placeholder {
  font-size: 18px;
  color: #909399;
}
</style>
